@charset "UTF-8";

html {
  /* 組み方向 */
  -epub-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;

  orphans: 1;
  widows: 1;
}

* {
  margin: 0;
  padding: 0;
}

/* 印刷用のみ段組にする */
@media print {
  html {
    column-count: 4;
    column-gap: 2em;
  }
}

@page {
  size: 205mm 277mm;
  margin-top: 17mm;
  margin-bottom: 15mm;
  margin-left: 15mm;
  margin-right: 15mm;

  /* 以下、マージンボックスに継承される */
  font-size: 8pt;
  vertical-align: top;
}


@page :left {
  margin-right: 17mm;
  background: url(img/bg-left.png) #fff repeat-y right top;
  /* 左上柱 */
  @top-left {
    content: "白馬岳";
    writing-mode: horizontal-tb; /* CSS仕様上は@pageルール内に書けばよいが、現時点のvivliostyle.jsの制限によりここに書く */
    font-family: $base-font-family; /* 本来不要（ルート要素の指定が継承される）だが、現時点のvivliostyle.jsの制限により必要 */
    margin-left: 8pt;
    margin-top: 7mm;
  }

  /* 左下ノンブル */
  @bottom-left {
    content: counter(page);
    writing-mode: horizontal-tb; /* CSS仕様上は@pageルール内に書けばよいが、現時点のvivliostyle.jsの制限によりここに書く */
    font-family: $nombre-font-family;
    margin-left: 8pt;
    margin-top: 5mm;
  }
}


@page :right {
  margin-left: 17mm;
  background: url(img/bg-right.png) #fff repeat-y 0 0;
  /*右上柱 */
  @top-right {
    content: "日本の百名山";
    writing-mode: horizontal-tb; /* CSS仕様上は@pageルール内に書けばよいが、現時点のvivliostyle.jsの制限によりここに書く */
    font-family: $base-font-family; /* 本来不要（ルート要素の指定が継承される）だが、現時点のvivliostyle.jsの制限により必要 */
    margin-right: 6pt;
    margin-top: 7mm;
  }

  /* 右下ノンブル */
  @bottom-right {
    content: counter(page);
    writing-mode: horizontal-tb; /* CSS仕様上は@pageルール内に書けばよいが、現時点のvivliostyle.jsの制限によりここに書く */
    font-family: $nombre-font-family;
    margin-right: 6pt;
    margin-top: 5mm;
  }
}


@page :first {
  background-image: none;
}